<script setup>
import { ref, reactive } from 'vue'

const Props = defineProps({
  // 枚举数据
  formList: {
    type: Array,
    default: () => []
  },
  //   校验
  rules: {
    type: Object,
    default: () => {}
  },
  //   回显
  form: {
    type: Object,
    default: () => {}
  },
  // 是否显示按钮
  Btn: {
    type: Boolean,
    default: false
  },
  // 是否为查看
  disabled: {
    type: Boolean,
    default: false
  },
  // 是否为审核
  examine: {
    type: Boolean,
    default: false
  }
})

// 审核
const rules = reactive({
  reviewComments: [{ required: true, message: '请填写审核意见', trigger: 'blur' }]
})

const aaaRef = ref(null)

// 保存按钮加载
const BtnLoading = ref(false)

// 此文件 数据表单
let ruleForm = reactive({})

const ruleFormRef = ref(null)
const ruleFormRef1 = ref(null)

Props.formList.forEach(item => {
  ruleForm[item.model] = ''
})
ruleForm = Props.form
const Emit = defineEmits(['reset', 'submit'])

// 下拉选择时
const SelectChange = val => {
  // console.log(val)
}

// 时间范围选择时
const TimeChange = val => {
  ruleForm[val] = ruleForm.Time.join(',')
  Emit('TimeChange', ruleForm[val])
  // console.log(ruleForm[val])
}

// 提交
const Submit = async () => {
  if (aaaRef.value) {
    const valid = await aaaRef.value.validate()
    if (!valid && Props.examine) return
  }

  return new Promise(async (j, v) => {
    await ruleFormRef.value.validate((valid, fields) => {
      ruleFormRef1.value.validate((valid, fields) => {
        if (valid) {
          j(ruleForm)
          BtnLoading.value = true
          Emit('submit', ruleForm)
        } else {
          j(false)
          proxy.Mes('warning', '请填写完整')
          BtnLoading.value = false
        }
      })
    })
  })
}
const PmsSubmit = () => {
  return new Promise(async (j, v) => {
    await ruleFormRef.value.validate((valid, fields) => {
      if (valid) {
        j(ruleForm)
        BtnLoading.value = true
        Emit('submit', ruleForm)
      } else {
        j(false)
        BtnLoading.value = false
        // console.log('error submit!', fields)
      }
    })
  })
}
// console.log(Props.rules)
// 重置查询条件
const reset = () => {
  Emit('reset')
}
defineExpose({ Submit })
</script>
<template>
  <div style="width: 100%">
    <div class="box">
      <el-form
        ref="ruleFormRef"
        class="demo-ruleForm"
        :model="ruleForm"
        :rules="Props.rules"
        label-width="auto"
        label-position="right"
        status-icon
      >
        <div style="display: inline" v-for="(item, index) in Props.formList" :key="index">
          <el-form-item :label="item.label" :prop="item.model">
            <!-- 输入 -->
            <el-input
              clearable
              :disabled="Props.disabled"
              v-model="ruleForm[item.model]"
              v-if="item.type === '输入框'"
              :placeholder="item.placeholder || '请输入内容'"
            />
            <div v-if="item.type === '备注框'">
              <!-- 备注框 -->
              <el-input
                autosize
                clearable
                :disabled="Props.disabled"
                v-model="ruleForm[item.model]"
                :rows="2"
                type="textarea"
                :placeholder="item.placeholder || '请输入内容'"
                :input-style="{ width: '100%' }"
              />
            </div>

            <!-- 下拉 -->
            <el-select
              v-model="ruleForm[item.model]"
              clearable
              :disabled="Props.disabled"
              :placeholder="item.placeholder || '请选择'"
              v-if="item.type === '下拉单选'"
              @change="SelectChange"
            >
              <el-option v-for="(item, index) in item.opt" :key="index" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
        </div>
      </el-form>
      <el-form ref="ruleFormRef1" class="upload" :model="ruleForm" :rules="Props.rules">
        <el-form-item label="开票信息" prop="invoicingInformation">
          <ImageUpload v-model="ruleForm.invoicingInformation" v-if="!Props.disabled" />
          <ImagePreview :src="ruleForm.invoicingInformation" v-else />
        </el-form-item>
        <el-form-item label="营业执照" prop="businessLicense">
          <ImageUpload v-model="ruleForm.businessLicense" v-if="!props.disabled" />
          <ImagePreview :src="ruleForm.businessLicense" v-else />
        </el-form-item>
      </el-form>
    </div>
    <!-- 审核意见 -->
    <el-form ref="aaaRef" :model="ruleForm" :rules="rules" v-if="props.examine">
      <el-form-item label="审核意见" prop="reviewComments">
        <el-input
          autosize
          clearable
          v-model="ruleForm.reviewComments"
          :disabled="!Props.examine"
          :rows="2"
          type="textarea"
          placeholder="请输入审核意见"
          :input-style="{ width: '100%' }"
        />
      </el-form-item>
    </el-form>
  </div>
  <!-- 按钮 -->
  <div class="Btn" v-if="Props.Btn">
    <el-button :loading="BtnLoading" type="primary" @click="Submit">保存</el-button>
    <el-button @click="Emit('reset')">取消</el-button>
  </div>
</template>

<style lang="scss" scoped>
.Btn {
  float: right;
  min-width: 160px;
}
.box {
  display: flex;
  justify-content: space-between;
  width: 100%;
  .demo-ruleForm {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .upload {
    flex: 1;
  }
}
</style>
